<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 
      1.修改基本数据类型 
        如何响应式的修改data数据:
         - 基本类型值直接修改即可(其实是重新赋值),是拥有响应式的
    
      2.修改数组类型数据
        数组方法分为两类 数组变更方法 和 非变更方法
        变更方法可以直接修改
        非变更方法可以得到一个新的值 重新覆盖

      3. 修改对象类型数据


     -->
    <button @click="handler1">修改基本类型数据</button>
    <p>数据展示{{msg}}</p>

    <hr>

    <button @click="handler2">修改数组类型数据</button>
    <ul>
      <li v-for="p in person">{{p}} </li>
    </ul>

    <hr>
    <button @click="handler3">修改对象数据</button>
    <ul>
      <li v-for="value,key in stu" :key="item">{{key}}--{{value}}</li>
    </ul>



  </div>
  <script>
    Vue.config.productionTip = false;

    const vm = new Vue({
      el: "#app",
      data () {
        return {
          msg: "hello",
          person: ["小王", "大李", "小张", "王中王"],
          stu: {
            name: "laowang",
            age: 18,
            score: {
              math: 100,
              ch: 90,
            },
          },
        };
      },
      methods: {
        // 1. 修改基本数据类型
        handler1 () {
          // console.log(this); // Vue实例对象
          // this.msg = "bye Vue";
          this.$data.msg = "bye Vue";
        },
        // 2. 修改数组类型的数据
        handler2 () {
          // 推荐使用数组的变更方法修改数组(push\pop\shift\unshift\splice\sort\reverse)
          // this.person.push('lala')
          // 若是数组的非变更方法  用修改过的数组覆盖掉原数组
          this.person = this.person.filter(p => p.startsWith('小'))
        },
        // 3. 修改对象类型数据  注意 直接操作某属性增加或删除无效 必须要有响应式的效果
        handler3 () {
          // 3.1 可以直接修改对象的属性的值 缺点 :层级深得不容易获取
          // (层级没有限制,只要能获取到这个属性),直接具有响应式
          /* this.person.name = "laowang1";
          this.person.score.math = 120; */

          // 3.2 还有改的方式是重新赋值(也是具有响应式的) 克隆并覆盖
          /* this.person = { ...this.person, age: 20 }; */

          // 3.3 vue实例提供的方法  可以修改和新增  下面两种方式都可以
          // this.$set(this.person, "sex", "男");
          // Vue.set(this.person, "sex", "男");

          // 3.4 可以通过修改属性的方法把被删除的属性值设置为null  
          // this.person.age = null

          // 3.5 如果一定要删除并且具有响应式,请使用Vue.delete或this.$delete方法
          // this.$delete(this.person, "age");
          // Vue.delete(this.person, "age");

        }

      },

    });
  </script>
</body>

</html>